<template>
  <div class="test_two_box">
    <video id="myVideo" class="video-js"  controls >
      <source :src="sourceSrc" type="video/mp4" />
    </video>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Video from 'video.js'
import 'video.js/dist/video-js.css'
@Component
export default class playVideoPage extends Vue {
  private listLoading = false;
  private myPlayer = {};
  private sourceList = this.$store.state.crumbs.playList
  private sourceSrc = this.sourceList[0]
   mounted() {
    this.initVideo();
  }
  public initVideo():void{
    const cilentWidth = document.body.clientWidth
      // //初始化视频方法
      let thisVideo = Video('myVideo' as any, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: false,

        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        loop:true,
        preload: "auto",
        controlBar: false,
        //设置视频播放器的显示宽度（以像素为单位）
        width: `${cilentWidth}px` as any,
        // //设置视频播放器的显示高度（以像素为单位）
        // height: "400px",
      });
      // 自动全屏
      // myPlayer.requestFullscreen()
      this.myPlayer= thisVideo
  }
}
</script>
<style lang="less">
.test_two_box{
  width: 100%;
  background: red;
}
</style>